<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>群聊天室</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!--<script src="../js/online.js"></script>-->
    <script src="../js/websocketConfig.js"></script>
    <script src="../js/chatFunctions.js"></script>
    <script src="../js/chatDirs.js"></script>
    <style>
        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background-color: #f3f4f6;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #9ca3af;
            border-radius: 4px;
        }
    </style>
</head>

<body class="bg-gray-100 font-sans leading-normal tracking-normal flex">
<!-- 侧边栏 -->
<div id="sidebar" class="bg-white w-64 p-4 h-screen overflow-y-auto">
    <h2 class="text-lg font-bold mb-4">聊天室列表</h2>
    <div id="joined-rooms" class="space-y-2">
        <!-- 加入的聊天室将动态添加到这里 -->
    </div>
</div>

<!-- 主内容区域 -->
<div class="container w-full md:max-w-3xl mx-auto pt-20 px-4">
    <div>
            <span id="online-count" class="text-sm text-gray-500">
                当前在线：<span class="font-medium text-blue-600">0</span>人
            </span>
    </div>

    <!-- 新增显示聊天室名称的元素 -->
    <span id="current-room" class="text-sm text-gray-500">
            当前聊天室：<span class="font-medium text-green-600">暂无</span>
        </span>

    <!-- 群名和昵称输入区域 -->
    <div class="flex flex-col items-center mb-8">
        <input type="text" id="room" name="group" placeholder="请输入群"
               class="border border-gray-300 rounded-md px-3 py-2 mb-4 w-full max-w-lg focus:outline-none focus:border-blue-500">
        <!--使用session，以保证安全-->
        <input type="text" id="nick" name="name" placeholder="请输入昵称" th:value="${session.loginUser.nickname}" readonly
               class="border border-gray-300 rounded-md px-3 py-2 w-full max-w-lg focus:outline-none focus:border-blue-500">
    </div>

    <!-- 进入聊天群按钮 -->
    <div class="flex justify-center mb-8">
        <button type="button" onclick="enter()"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">进入聊天群
        </button>
    </div>

    <!-- 消息显示区域 -->
    <div id="message" class="bg-white p-4 rounded-md shadow-md mb-8 h-64 overflow-y-scroll">
    </div>

    <!-- 消息输入和发送区域 -->
    <div class="flex flex-col items-center">
            <textarea name="send" id="text" rows="10" cols="30" placeholder="输入发送消息"
                      class="border border-gray-300 rounded-md px-3 py-2 mb-4 w-full max-w-lg focus:outline-none focus:border-blue-500">
            </textarea>
        <button type="button" onclick="exitRoom()"
                class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-2">退出聊天室
        </button>
        <div>&nbsp;</div>
        <button type="button" onclick="addImage()"
                class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded mr-2">添加图片
        </button>
        <div>&nbsp;</div>
        <button type="button" onclick="uploadFile()"
                class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded mr-2">上传文件
        </button>
        <div>&nbsp;</div>
        <button type="button" onclick="send()"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">发送
        </button>
    </div>
</div>
</body>
</html>